<h4>w2ui best</h4>

<link rel="stylesheet" type="text/css" href={{ asset('assets/grid/temp/jquery-handsontable/dist/jquery.handsontable.full.css') }} />
<link rel="stylesheet" type="text/css" href={{ asset('assets/bootstrap/bootstrap.min.css') }} />



<div id="grid" style="width: 100%; height: 400px;"></div>
<br>
<button class="w2ui-btn" onclick="showChanged()">Get Changed</button>

<br>
<br>

<script src="{{ asset('assets/jquery/jquery-1.10.2.min.js') }}"></script>
<script src="{{ asset('assets/grid/temp/jquery-handsontable/dist/jquery.handsontable.full.js') }}"></script>

<script type="text/javascript">
var books = {{ json_encode($book)}};
$(function () {
    var tax_kbn_list = {"1":"仕カ","2":"課売","3":"税外","4":"清算","5":"非売","6":"免売"};   // 税区分
    var tax_calc_kbn_list = {"1":"(","2":"+","3":"-"};   // 税計算区分
    var tax_calc_kbn_list2= {"1":"内税","2":"外税","3":"別記"};   // 税計算区分
    var records=[];
    var _recid = 0;
    function createSubLine1(id, e) {
        if (e) {
            return { recid:id,ymd:e.ymd,d_code:e.d_code,d_name:e.d_name,d_amount:e.d_amount,d_tax:e.d_tax_pct,c_code:e.c_code,c_name:e.c_name, c_amount:e.c_amount,c_tax:e.c_tax_pct,summary:e.summary,data:e};
        }
        return { recid:id,ymd:'-',data:e};
    };
    function createSubLine2(id, e) {
        if (e) {
            return {recid:id,d_code:e.d_code2,d_name:e.d_name2,d_amount:e.d_amount_tax,d_tax:e.d_tax_kbn,c_code:e.c_code2,c_name:e.c_name2,c_amount:e.c_amount_tax,c_tax:e.c_tax_kbn,data:e};
        }
        return { recid:id,data:e};
    };
    function render_tax(instance, td, row, col, prop, tax, cellProperties) {
        var calckbn = instance.getDataAtRowProp(row, 'data.'+prop+'_calc_kbn');
        if (tax) {
           if (row%2==0) {
               $s = (tax_calc_kbn_list[calckbn]) ? tax_calc_kbn_list[calckbn] : '';
               td.innerHTML = $s +tax+'%'
           } else {
               td.innerHTML = (tax_kbn_list[tax]) ? tax_kbn_list[tax] : '';
           }
        }
        return td;
    };

    books.forEach(function(e){
        var e1 = createSubLine1(_recid++, e);
        var e2 = createSubLine2(_recid++, e);
        records.push(e1,e2);
    });
  var $container = $("#grid");
  $container.handsontable({
    data: records,
    startRows: 1,
    startCols: 1,
    rowaHeaders: false,
    manualColumnResize: true,
    minSpareRows: 1,
    //colHeaders: ['#', 'date','code','name','amount','税','code','name','amount','税', 'summary'],
    colHeaders: ['code','name','amount','税','code','name','amount','税', 'summary'],
    colWidths: [40, 80, 50, 120, 100, 50, 50, 120, 100, 50, 240 ],
    //fixedRowsTop: 0,
    //fixedColumnsLeft: 1,
    columns: [
        { data: 'data.seq', caption: '#', size: '24px', sortable: true, resizable: true , renderer: function (instance, td, row, col, prop, value, cellProperties) {td.innerHTML = ((row%2==0) ? (row/2+1):'');return td;}},
        { data: 'ymd', caption: 'date', size: '70px', sortable: true, resizable: true, editable: { type: 'text' }},
        { data: 'd_code', caption: 'code', size: '45px', sortable: true, resizable: true, editable: { type: 'text' }},
        { data: 'd_name', caption: 'name', size: '100px', sortable: true, resizable: true, editable: { type: 'text' }},
        { data: 'd_amount', caption: 'amount', size: '80px', sortable: true, resizable: true, editable: { type: 'int' }},
        { data: 'd_tax', caption: '税', size: '40px', sortable: true, resizable: true, editable: { type: 'int' },renderer: function (instance, td, row, col, prop, value, cellProperties){return render_tax(instance, td, row, col, prop, value, cellProperties);}},
        { data: 'c_code', caption: 'code', size: '45px', sortable: true, resizable: true, editable: { type: 'text' }},
        { data: 'c_name', caption: 'name', size: '100px', sortable: true, resizable: true, editable: { type: 'text' }},
        { data: 'c_amount', caption: 'amount', size: '80px', sortable: true, resizable: true, editable: { type: 'int' }},
        { data: 'c_tax', caption: '税', size: '40px', sortable: true, resizable: true, editable: { type: 'int' },renderer: function (instance, td, row, col, prop, value, cellProperties){return render_tax(instance, td, row, col, prop, value, cellProperties);}},
        { data: 'summary', caption: 'summary', size: '160px', sortable: true, resizable: true, editable: { type: 'text' }},
    ],
    contextMenu: true,
    afterRender: function () {$container.find('thead').find('tr').before('<tr id="header-grouping"><th rowspan="2">No</th><th rowspan="2">Date</th><th colspan="4">Credit</th><th colspan="4">Debt</th><th rowspan="4">Summary</th></tr>');},
    beforeRender: function() {$('#header-grouping').remove();},
    modifyColWidth: function () {$('#header-grouping').remove();}
  });
});

</script>

